<template>
    <div class="address">
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="created_at"
          label="创建日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
        <el-table-column
          align="right">
          <template slot="header" >
           <el-button type="primary" size="small" @click="isDisplay=true">新建地址</el-button>

          </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
<!--      点击新建地址弹出框-->
      <el-dialog
        title="新建地址"
        :visible.sync="isDisplay"
        width="40%">
        <el-form  :rules="rules" ref="createData" :model="createData" label-width="120px">
          <el-form-item label="收货人姓名" prop="name">
            <el-input v-model="createData.name" placeholder="请输入收货人姓名"></el-input>
          </el-form-item>
          <el-form-item label="收货人手机号" prop="phone">
            <el-input v-model="createData.phone" placeholder="请输入收货人手机号"></el-input>
          </el-form-item>
          <el-form-item  label="收货地址" prop="area">
            <el-cascader :options="area" :props="{value:'name',label:'name',children:'next'}" size="medium"  style="width: 100%" v-model="createData.area" ></el-cascader>
          </el-form-item>
          <el-form-item label="详细地址" prop="address">
            <el-input v-model="createData.address" type="textarea" placeholder="请输入详细地址"></el-input>
          </el-form-item>
          <el-form-item label="邮编" prop="zip">
            <el-input v-model="createData.zip" placeholder="请输入邮编"></el-input>
          </el-form-item>
<!--创建按钮-->
          <el-form-item>
            <el-button type="primary" @click="submitForm">立即创建</el-button>
            <el-button @click="closeCreate">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
</template>

<script>
import request from '../../../request/home/user/address'
export default {
  name: 'Address',
  data () {
    var phone = (rule, value, callback) => {
      if (!(/^1[3456789]\d{9}$/.test(value))) {
        return callback(new Error('手机号不正确'))
      }
      return callback()
    }
    // 验证是否填写地址
    var area = (rule, value, callback) => {
      if (value.province === '' || value.city === '' || value.area === '') {
        return callback(new Error('请选择收货地址'))
      }
      return callback()
    }
    return {
      dialogTitle: '新建地址',
      area: [],
      isDisplay: false,
      tableData: {},
      createData: {
        name: '',
        phone: '',
        area: {
          province: '',
          city: '',
          area: ''
        },
        address: '',
        zip: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入收件人姓名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: phone, trigger: 'blur' }
        ],
        area: [
          { validator: area, trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入详细的地址', trigger: 'blur' }
        ],
        zip: [
          { required: true, message: '请输入邮编', trigger: 'blur' }
        ]
      }
    }
  },
  mounted: function () {
    // 获取全国地址信息
    request.getAreaList(result => {
      this.area = result
    })
    // 获取我的地址信息
    request.index((result) => {
      this.tableData = result
    })
  },
  methods: {
    /**
     *提交表单
     */
    submitForm () {
      // 检查表单
      this.$refs.createData.validate(valid => {
        if (valid !== true) {
          return false
        }
        // 存在编辑不存在创建
        if (this.createData.id) {
          request.update(this.createData, result => {
            // todo 替换数据
            request.update((result) => {
              this.tableData = result
            })
            this.closeCreate()
          })
        } else {
          request.sendData(this.createData, result => {
            // 添加数据
            this.tableData.push(result)
            // 清除表单数据
            this.closeCreate()
          })
        }
      })
    },
    /**
     *关闭表单
     */
    closeCreate () {
      // 清除表单
      this.$refs.createData.resetFields()
      this.isDisplay = false
    },
    // 编辑信息
    handleEdit (index, row) {
      this.dialogNode = '编辑信息'
      this.createData = row
      this.isDisplay = true
    },
    // 删除信息
    handleDelete (index, row) {
      request.delete(row.id)
    }
  }
}
</script>

<style scoped lang="scss">

</style>
